import React from 'react';
import { Layout } from 'antd';
import './style/customize/app.less';
import SiderCustom from './components/SiderCustom';
import HeaderCustom from './components/HeaderCustom';
import memoryUtils from './utils/memoryUtils';
import { Redirect } from 'react-router-dom';
import Routers from './routers';

const { Content } = Layout;

export default class App extends React.Component {
  state = {
    collapsed: false,
  };

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };

  render() {
    if (!memoryUtils.userInfo) {
      return <Redirect to="/login"></Redirect>;
    }
    return (
      <Layout>
        <SiderCustom collapsed={this.state.collapsed} />
        <Layout>
          <HeaderCustom toggle={this.toggle} collapsed={this.state.collapsed} />
          <Content
            className="px-3"
            style={{
              height: 'calc(100vh - 64px)',
            }}
          >
            <Routers />
          </Content>
        </Layout>
      </Layout>
    );
  }
}
